<template>
  <div class="Overview">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder"><i class="el-icon-user-solid"></i></div>
              <span class="text"> 当前主播量 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
              <el-tooltip
                class="item"
                effect="dark"
                content="对比昨日"
                placement="bottom"
              >
                <p class="up"><i class="el-icon-caret-top"></i> 300</p>
              </el-tooltip>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder">
                <i class="el-icon-message-solid"></i>
              </div>
              <span class="text"> 当前开播数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
              <el-tooltip
                class="item"
                effect="dark"
                content="对比昨日"
                placement="bottom"
              >
                <!-- <p class="up"><i class="el-icon-caret-top"></i> 300</p> -->
                <p class="down"><i class="el-icon-caret-bottom"></i> 300</p>
              </el-tooltip>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="titel">
            <div class="left">
              <div class="iconborder">
                <i class="el-icon-s-opportunity"></i>
              </div>
              <span class="text"> 当前在线人数 </span>
            </div>
            <div class="right">
              <p class="num">2518</p>
              <el-tooltip
                class="item"
                effect="dark"
                content="对比昨日"
                placement="bottom"
              >
                <!-- <p class="up"><i class="el-icon-caret-top"></i> 300</p> -->
                <p class="down"><i class="el-icon-caret-bottom"></i> 300</p>
              </el-tooltip>
            </div>
          </div>
          <hr />
          <h3>2020-9-15</h3>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="nav">
          <div class="row">
            <div class="left">
              <div class="text">主播申请</div>
              <div class="num">2518</div>
            </div>
            <div class="right el-icon-arrow-right"></div>
          </div>
          <hr />
          <div class="row">
            <div class="left">
              <div class="text">用户举报</div>
              <div class="num">2518</div>
            </div>
            <div class="right el-icon-arrow-right"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="18">
        <el-radio-group v-model="type" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">总计</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="6">
        <div class="btnBox">
          <el-button icon="el-icon-paperclip" size="mini">导出EXCEL</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px" :gutter="20">
      <el-col :span="6">
        <el-card class="centerCard">
          <div class="titel">
            <i class="block"></i>
            <span class="txt">使用数据</span>
            <el-tooltip class="item" effect="dark" placement="right-start">
              <div slot="content">
                安装量：一个设备号只记录一次安装<br />
                启动量：启动APP次数<br />
                注册量：一个用户ID只记录一次注册
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <div class="content">
            <div class="item">
              <img
                class="item_img"
                src="../../assets/image/xiazia.png"
                alt=""
              />
              <div class="item_content">
                <div class="txt">安装量</div>
                <div class="num">123456</div>
              </div>
            </div>
            <div class="item">
              <img
                class="item_img"
                src="../../assets/image/qidong.png"
                alt=""
              />
              <div class="item_content">
                <div class="txt">启动量</div>
                <div class="num">123456</div>
              </div>
            </div>
            <div class="item">
              <img class="item_img" src="../../assets/image/zhuce.png" alt="" />
              <div class="item_content">
                <div class="txt">注册量</div>
                <div class="num">123456</div>
              </div>
              <div class="sex">
                <div>
                  <i class="el-icon-male" style="color: #7cb5ec"></i
                  ><span>3230</span>
                </div>
                <div>
                  <i class="el-icon-female" style="color: #ff6379"></i
                  ><span>3130</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="centerCard">
          <div class="titel">
            <i class="block"></i>
            <span class="txt">流水数据</span>
            <el-tooltip class="item" effect="dark" placement="right-start">
              <div slot="content">
                安装量：一个设备号只记录一次安装<br />
                启动量：启动APP次数<br />
                注册量：一个用户ID只记录一次注册
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
          <div class="content1">
            <div class="data">
              <div class="item">
                <div class="box">
                  <div class="titel">总金额</div>
                  <div class="num">124345</div>
                </div>
                <div class="box">
                  <div class="titel">充值转换率</div>
                  <div class="num">20.02%</div>
                </div>
              </div>
              <div class="item">
                <div class="box">
                  <div class="titel">ARPU</div>
                  <div class="num">124345</div>
                </div>
                <div class="box">
                  <div class="titel">ARPPU</div>
                  <div class="num">20.02%</div>
                </div>
              </div>
              <div class="item">
                <div class="box">
                  <div class="titel">LTV</div>
                  <div class="num">124345</div>
                </div>
                <!-- <div class="box">
                  <div class="titel">充值转换率</div>
                  <div class="num">20.02%</div>
                </div> -->
              </div>
            </div>
            <div class="Echarts">
              <div id="echarts" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px" :gutter="20">
      <el-col :span="6">
        <el-card style="height: 500px">
          <div class="paihang1">
            <el-radio-group v-model="type2" fill="#7b94d8">
              <el-radio-button label="1">收入榜</el-radio-button>
              <el-radio-button label="2">富豪榜</el-radio-button>
              <el-radio-button label="3">吸粉榜</el-radio-button>
            </el-radio-group>
          </div>
          <div class="paihang">
            <el-radio-group v-model="type3" fill="#7b94d8" size="small">
              <el-radio-button label="1">本日</el-radio-button>
              <el-radio-button label="2">本周</el-radio-button>
              <el-radio-button label="3">本月</el-radio-button>
            </el-radio-group>
            <el-button icon="el-icon-paperclip" size="mini"
              >导出EXCEL</el-button
            >
          </div>
          <div class="paihangbox">
            <el-table
              :data="tableData"
              :show-header="false"
              style="width: 100%"
              height="370"
            >
              <el-table-column prop="rk"> </el-table-column>
              <el-table-column prop="name"> </el-table-column>
              <el-table-column prop="id"> </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="footCard">
          <div class="titel">
            <div>
              <i class="block"></i>
              <span class="txt">近30天每日开播人数及收入</span>
            </div>
            <div>
              <el-date-picker
                size="small"
                v-model="timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusA"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <div class="echart">
            <div id="echartsA" style="width: 100%; height: 100%"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "1",
      type2: "1",
      type3: "1",
      myChart: null,
      myChartA: null,
      tableData: [
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
        { rk: 1, name: "张3", id: "123" },
      ],
      timeArr: [],
      startDate: "",
      endDate: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    //初始化Echarts
    echartsInit() {
      this.myChart = this.$echarts.init(document.getElementById("echarts"));
      this.myChartA = this.$echarts.init(document.getElementById("echartsA"));
    },
    //配置Echarts
    setChartOption() {
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: ["充值金币"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "金额",
            type: "bar",
            barWidth: 30,
            data: [10],
          },
          {
            name: "人数",
            type: "bar",
            yAxisIndex: 1,
            barWidth: 30,
            data: [20],
          },
        ],
      });
    },
    setChartOptionA() {
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartA.setOption({
        color: colors,

        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["开播人数", "收入"],
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "开播人数  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "2016-1",
              "2016-2",
              "2016-3",
              "2016-4",
              "2016-5",
              "2016-6",
              "2016-7",
              "2016-8",
              "2016-9",
              "2016-10",
              "2016-11",
              "2016-12",
            ],
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "收入  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "2015-1",
              "2015-2",
              "2015-3",
              "2015-4",
              "2015-5",
              "2015-6",
              "2015-7",
              "2015-8",
              "2015-9",
              "2015-10",
              "2015-11",
              "2015-12",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "收入",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "开播人数",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
              0.7,
            ],
          },
        ],
      });
    },
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
  },
  mounted() {
    this.echartsInit();
    this.setChartOption();
    this.setChartOptionA();
  },
};
</script>

<style lang="less" scoped>
.Overview {
  padding: 20px;
  .card {
    .titel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .iconborder {
          border: 5px solid #ccd4fe;
          border-radius: 50%;
          display: inline-block;
          i {
            border: 10px solid #7b94d8;
            border-radius: 50%;
            padding: 5px;
            color: #7b94d8;
          }
        }
        .text {
          margin-left: 10px;
          font-weight: 700;
          color: #7b94d8;
          font-size: 18px;
        }
      }
      .right {
        .num {
          font-size: 24px;
          font-weight: 800;
          color: #7e84a4;
        }
        p {
          text-align: right;
          margin: 10px 0;
          font-weight: 600;
        }
        .up {
          color: #41c49a;
        }
        .down {
          color: #fc512d;
        }
      }
    }
    hr {
      border: none;
      border-top: 1px solid #7b94d8;
    }
    h3 {
      margin: 0;
      color: #7b94d8;
    }
  }
  .nav {
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 3px;
      .text {
        color: #7b94d8;
        font-weight: 700;
      }
      .num {
        color: #7e84a4;
        margin-top: 10px;
        font-weight: 700;
      }
      .right {
        color: #7b94d8;
      }
    }
    hr {
      border: none;
      border-top: 1px solid #7b94d8;
    }
  }
  .btnBox {
    text-align: right;
  }
  .centerCard {
    height: 400px;
    .titel {
      display: flex;
      align-items: center;
      .block {
        display: inline-block;
        width: 5px;
        height: 18px;
        background-color: #7b94d8;
      }
      .txt {
        margin: 0 10px;
        font-size: 18px;
        font-weight: 700;
      }
      .el-icon-warning {
        color: #7e84a4;
      }
    }
    .content {
      margin-top: 30px;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .item_img {
          width: 70px;
          height: 70px;
        }
        .item_content {
          margin-left: 20px;
          color: #7e84a4;
          .txt {
            color: #7b94d8;
            font-size: 20px;
            font-weight: 700;
          }
          .num {
            margin-top: 8px;
            font-size: 24px;
            font-weight: 700;
            color: #7e84a4;
          }
        }
        .sex {
          width: 100%;
          text-align: right;
          div {
            width: 100%;
            // display: flex;
            // align-items: center;
            i {
              font-size: 25px;
              font-weight: 700;
            }
            span {
              margin-left: 10px;
              font-size: 20px;
              font-weight: 700;
              color: #7e84a4;
            }
          }
        }
      }
    }
    .content1 {
      width: 100%;
      display: flex;
      .data {
        width: 28%;
        padding-top: 32px;
        .item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 40px;
          .box {
            font-weight: 700;
            width: 120px;
            text-align: left;
            .titel {
              font-size: 20px;
              color: #7b94d8;
            }
            .num {
              margin-top: 10px;
              font-size: 22px;
              color: #7e84a4;
            }
          }
        }
      }
      .Echarts {
        flex-grow: 1;
      }
    }
  }
  .paihang1 {
    text-align: center;
    margin-bottom: 10px;
  }
  .paihang {
    display: flex;
    justify-content: space-between;
  }
  .paihangbox {
    margin-top: 10px;

    // 滚动条的宽度
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条 必写
    }
    // 滚动条的滑块
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #7b94d8;
      border-radius: 3px;
    }
  }
  .footCard {
    height: 500px;
    .titel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .block {
        display: inline-block;
        width: 5px;
        height: 18px;
        background-color: #7b94d8;
      }
      .txt {
        margin: 0 10px;
        font-size: 18px;
        font-weight: 700;
      }
    }
    .echart {
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
  }
}
</style>